<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
    <title>Examples • Playground</title>
    <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
    <script src="../bundle.js"></script>
    <script src="//cdn.jsdelivr.net/gh/donmccurdy/aframe-physics-system@v3.2.0/dist/aframe-physics-system.min.js"></script>
    <script>
/**
 * Toggle velocity.
 *
 * Moves an object back and forth along an axis, within a min/max extent.
 */
AFRAME.registerComponent('toggle-velocity', {
  dependencies: ['velocity'],
  schema: {
    axis: { default: 'x', oneOf: ['x', 'y', 'z'] },
    min: { default: 0 },
    max: { default: 0 },
    speed: { default: 1 }
  },
  init: function () {
    var velocity = {x: 0, y: 0, z: 0};
    velocity[this.data.axis] = this.data.speed;
    this.el.setAttribute('velocity', velocity);

    if (this.el.sceneEl.addBehavior) this.el.sceneEl.addBehavior(this);
  },
  remove: function () {},
  update: function () { this.tick(); },
  tick: function () {
    var data = this.data,
        velocity = this.el.getAttribute('velocity'),
        position = this.el.getAttribute('position');
    if (velocity[data.axis] > 0 && position[data.axis] > data.max) {
      velocity[data.axis] = -data.speed;
      this.el.setAttribute('velocity', velocity);
    } else if (velocity[data.axis] < 0 && position[data.axis] < data.min) {
      velocity[data.axis] = data.speed;
      this.el.setAttribute('velocity', velocity);
    }
  },
});
    </script>
  </head>
  <body>
    <a-scene>
      <!-- Player -->
      <a-entity id="rig" movement-controls kinematic-body position="10 0 0">
        <a-entity id="camera"
                  camera
                  position="0 1.6 0"
                  look-controls="pointerLockEnabled: true"></a-entity>
      </a-entity>

      <!-- Ground -->
      <a-grid static-body></a-grid>

      <!-- Tower -->
      <a-box id="tower"
              color="#39BB82"
              width="10" height="5" depth="6"
              position="0 2.5 -15"
              static-body></a-box>

      <!-- Ramp -->
      <a-box id="ramp"
             color="#39BB82"
             width="1" height="10" depth="18.86796"
             position="0 -4.04 -6.33"
             rotation="30 0 0"
             static-body></a-box>

      <!-- Moving platforms -->
      <a-box id="platform1"
             color="#39BB82"
             width="4" height="0.25" depth="4"
             position="7 0.125 -15"
             velocity="0 0 0"
             toggle-velocity="axis: z; min: -5; max: 5;"
             static-body></a-box>
      <a-box id="platform2"
             color="#39BB82"
             width="4" height="0.25" depth="4"
             position="-7 0.125 -15"
             velocity="0 0 0"
             toggle-velocity="axis: y; min: 0.125; max: 5;"
             static-body></a-box>

      <!-- Blocks -->
      <a-box color="#39BB82"
             width="1" height="1" depth="1"
             position="15 2 0.6"
             dynamic-body></a-box>
      <a-box color="#39BB82"
             width="1" height="1" depth="1"
             position="15 2 -0.6"
             dynamic-body></a-box>
      <a-box color="#39BB82"
             width="1" height="1" depth="1"
             position="15 4 0"
             dynamic-body></a-box>
      <a-cylinder color="#39BB82"
             rotation="90 0 0"
             position="15 2 4"
             dynamic-body></a-cylinder>
      <a-sphere color="#39BB82"
             position="15 2 -4"
             dynamic-body></a-sphere>

      <!-- Lighting -->
      <a-light type="ambient" color="#bbb"></a-light>
      <a-light color="#ccc" position="0 30 0" distance="100" intensity="0.4" type="point"></a-light>
      <a-light color="#ccc" position="3 10 -10" distance="50" intensity="0.4" type="point"></a-light>
    </a-scene>
  </body>
</html>
